<template>
	<view class="order">
		<up-toast ref="uToast" />
		<image class="bg-logo" src="@/static/image/logo_bg.png" />
		<z-paging class="paging" ref="pagingRef" v-model="dataList" @query="getOrderDataList" :loading-more-enabled="false" created-reload auto-show-back-to-top default-page-size="10" inside-more>
			<template #loading>
				<view>加载中</view>
			</template>
			<template #top>
				<view class="topbar" :style="topbarStyle">
					<view class="topbar-returnBtn" @click="handleReturnPage">
						<up-icon name="arrow-left" color="white" size="24"></up-icon>
						<text class="topbar-returnBtn-text">返回</text>
					</view>
					<view class="topbar-title">年检订单</view>
				</view>
				<up-tabs
					:list="tab.optionList"
					:current="tab.currIndex"
					@change="handleTabChange"
					lineWidth="30"
					lineColor="`linear-gradient(to right, #0558a8, #1e7eba, #0558a8)`"
					:activeStyle="{ color: '#fff', fontWeight: 'bold', fontSize: '15px', transform: 'scale(1.05)' }"
					:inactiveStyle="{ color: '#fff', transform: 'scale(1)' }" />
			</template>
			<view class="list" v-for="(item, index) in dataList" :key="index">
				<view class="list-item" @click.stop="handleOpenOrderDetail(item)">
					<view class="list-item-title">
						<view class="list-item-title-text">
							<text class="list-item-title-important">{{ item.orderType }}</text>
						</view>
						<text v-if="tab.currIndex === '0' || tab.currIndex === '4'">{{ statusTag(item).text }}</text>
					</view>
					<view class="list-item-desc import-desc"><text class="list-item-desc-title">车牌号</text>{{ item.licensePlate }}</view>
					<view class="list-item-desc"><text class="list-item-desc-title">联系人</text>{{ item.userName }}</view>
					<view class="list-item-desc import-desc"><text class="list-item-desc-title">预约时间</text>{{ item.checkTime }}</view>
					<view class="list-item-desc import-desc" v-if="item.status === 2"><text class="list-item-desc-title">核销时间</text>{{ item.finishTime }}</view>
					<view class="list-item-desc import-desc" v-if="item.status === 3"><text class="list-item-desc-title">取消时间</text>{{ item.cancelTime }}</view>
					<view class="list-item-desc import-desc" v-if="item.status === 4"><text class="list-item-desc-title">退款时间</text>{{ item.refundTime }}</view>
					<view class="list-item-desc"><text class="list-item-desc-title">检测站点</text>{{ item.checkStation }}</view>
					<view class="list-item-desc" @click.stop="handleDetail(item)">
						<text class="list-item-desc-title">详细地址</text>
						{{ item.checkStationLocation }}
						<up-icon name="arrow-right" color="#333333" size="14" />
					</view>
					<view class="list-item-btn">
						<text class="list-item-title-price">￥{{ item.price }}</text>
						<view class="list-item-btn-item" v-if="item.status === 0" @click.stop="handleOpenOrderDetail(item)">去付款</view>
						<view class="list-item-btn-item" v-if="item.status === 1" @click.stop="handleOpenOrderDetail(item)">出示券码</view>
						<view class="list-item-btn-item delete" v-if="item.status !== 0 && item.status !== 1" @click.stop="handleDelete(item)">删除订单</view>
						<view class="list-item-btn-item" v-if="item.status === 2" @click.stop="handleComment(item)">评价</view>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 删除订单确认弹窗 -->
    <up-modal
			ref="uModal"
      :show="isShowConfirmModel"
      @confirm="handleConfirm"
      @cancel="handleClose"
      @close="handleClose"
			title="是否确认删除订单?"
			confirmColor="#125796"
			showCancelButton
			asyncClose
      closeOnClickOverlay />
	</view>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import API from '@/api';
	import useMapUtils from '@/utils/map.js';
  import useCommonUtils from '@/utils/common'

	const { openLocation } = useMapUtils();
  const { formatDate } = useCommonUtils();
  onLoad(async options => {
		console.log('onLoad');
  	if(options.tabIndex) tab.currIndex = options.tabIndex;
  });

	onShow(() => {
		if (pagingRef.value) pagingRef.value.reload();
	})

  // const orderData = reactive({})
	const tab = reactive({
    optionList: [
      { name: '全部', status: null },
      { name: '待付款', status: 0 },
      { name: '待使用', status: 1 },
      { name: '已完成', status: 2},
      { name: '取消/退款', status: [3, 4]}
    ],
    currIndex: 0
  });
	let deleteOrderId = '';
	const isShowConfirmModel = ref(false)
	const pagingRef = ref(null);
	const dataList = ref([]);
  const statusTag = computed(() => {
	  return orderItem => {
			switch(orderItem.status) {
				case 0: return { text: '待付款', type: 'error' };
				case 1: return { text: '待使用', type: 'success' };
				case 2: return { text: '已完成', type: 'primary' };
				case 3: return { text: '已取消', type: 'info' };
				case 4: return { text: '已退款', type: 'info' };
				default: return {};
			}
		}
  })

  const { globalData } = getApp();
  const topbarStyle = `height: ${globalData.navBarHeight}px; margin-top: ${globalData.statusBarHeight}px`;
  const mainStyle = computed(() => `margin-top: ${globalData.navBarHeight + globalData.statusBarHeight + 12}px;`);

	const handleOpenOrderDetail = orderItem => {
		uni.navigateTo({
			url: `/pages/mine/pages/order/orderResult?orderId=${orderItem.id}`
		})
	}

	const handleComment = orderItem => {
		uni.navigateTo({
			url: `/pages/addComment/addComment?orderId=${orderItem.id}`
		})
	}

	const handleDelete = orderItem => {
		deleteOrderId = orderItem.id
		isShowConfirmModel.value = true;
	}

	const handleConfirm = async () => {
    await API.order.delete(deleteOrderId);
    uni.$u.toast('删除成功');
		handleClose()
	}
	
	const handleClose = () => {
		isShowConfirmModel.value = false
	}

	
	const handleTabChange = async ({ index }) => {
    tab.currIndex = index;
		pagingRef.value.reload();
  };

	const handleDetail = orderItem => {
    openLocation({
      name: orderItem.checkStation,
      address: orderItem.checkStationLocation,
      latitude: orderItem.latitude,
      longitude: orderItem.longitude
    });
  };

	const getOrderDataList = async (pageNo, pageSize) => {
		const params = { pageSize, pageNum: pageNo }
		if (Number(tab.currIndex)) params.status = tab.optionList[tab.currIndex].status;
		const res = await API.order.pageList(params);
		pagingRef.value.complete(res.data.list);
	}

  const handleReturnPage = () => {
    uni.navigateBack();
  };
</script>

<style lang="scss" scoped>
  .order {
    height: 100vh;
    overflow: auto;
    position: relative;
    background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 520rpx);

    .bg-logo {
      position: fixed;
      top: -3%;
      width: 680rpx;
      height: 600rpx;
      right: 0;
      pointer-events: none;
    }

    .topbar {
      color: white;
      z-index: 1;
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 0 12px;
      @include flex-row(flex-start, center);

      &-returnBtn {
        @include flex-row(flex-start, center);

        &-text {
          margin-left: 4px;
          font-size: 14px;
        }
      }

      &-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

		.list {
			&-item {
        position: relative;
        @include card;
        padding: 12px;
      
        &-title {
          font-size: 15px;
          display: flex;
          align-items: center;
          height: 20px;
          color: $uni-text-color-placeholder;
          margin-bottom: 12px;
					@include flex-row(space-between, center);

					&-text {
						flex: 1;
						font-weight: bold;
						color: $uni-text-color;
						@include text-overflow;
					}
      
          &-important {
            color: $uni-color-primary;
          }

					&-price {
						margin-left: 4px;
						font-weight: bold;
						color: $uni-color-primary;
					}
      
          &::before {
            content: '';
            margin-right: 6px;
            width: 4px;
            height: 100%;
            border-radius: 2px;
            background: $uni-color-gradient-blue;
          }
        }

        &-btn {
					width: 100%;
					@include flex-row(flex-end, center);

          &-item {
						margin-left: 12px;
						@include size(80px, 28px);
						border-radius: 40px;
						font-weight: bold;
						font-size: 14px;
						color: $uni-color-primary;
						border: 1px solid $uni-color-primary;
						@include flex-row(center, center);
          }

					.delete {
						color: $uni-text-color;
						border: 1px solid $uni-border-color;
					}
        }

        &-desc {
          padding: 6px 0;
          font-size: 14px;
          color: $uni-text-color;
          @include flex-row(flex-start, center);

          &-title {
            width: 60px;
            font-size: 14px;
            color: $uni-text-color;
            margin-right: 24px;
            font-weight: normal;
          }
        }

        .import-desc {
          font-weight: bold;
        }
      }
		}

		.common-popup {
			padding: 12px;
			padding-bottom: 18px;

			&-btn {
        height: 45px;
        line-height: 45px;
        border-radius: 12px;
        font-size: 16px;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.02);
        text-align: center;
        color: white;
        font-weight: lighter;
        letter-spacing: 2px;
        background: linear-gradient(145deg, #1e7eba, #0558a8);
      }
		}
  }
</style>
